<template>
  <div class="wq-topbar">
    <el-menu router default-active="activeIndex" class="el-menu-top" mode="horizontal" @select="handleSelect">
      <!--侧边菜单的展开与折叠-->
        <div class="collapse-btn" @click="collapseChage">
            <i v-if="!isCollapse" class="el-icon-s-fold"></i>
            <i v-else class="el-icon-s-unfold"></i>
        </div>
        <h3>员工信息管理系统</h3>
      <div class="top-menu-item">
        <el-menu-item index="huanfu" @click="handleFullScreen">
          <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
            <i class="el-icon-rank quanping"></i>
          </el-tooltip>
        </el-menu-item>
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <img v-if="circleUrl" :src="this.$store.state.userinfo.imgurl" />
           {{this.$store.state.userinfo.username}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="mine"><i class="el-icon-postcard"></i>个人中心</el-dropdown-item>
            <el-dropdown-item  command="exit"><i class="el-icon-switch-button"></i>退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-menu>
  </div>
</template>
<script>
import bus from '../../bus.js';
export default {
  data() {
    return {
      activeIndex: "1",
      fullscreen: false,
      isCollapse: false,
      circleUrl:this.$store.state.userinfo.imgurl,
      username:this.$store.state.userinfo.username
    };
  },
  created(){
    // this.changeusername();
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key);
      console.log(keyPath);
    },
    handleCommand(command) {
      console.log(command);
      if(command=='exit'){
        this.$confirm('确定退出本系统吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push("/login");
        }).catch(() => {
        })
      }else if(command=='mine'){
        this.$router.push("/personal/mine");
      }
    },
    // 侧边栏折叠
    collapseChage() {
        this.isCollapse = !this.isCollapse;
        bus.$emit('isCollapse', this.isCollapse);
    },
    // 全屏事件
    handleFullScreen() {
        let element = document.documentElement;
        if (this.fullscreen) {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        } else {
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.msRequestFullscreen) {
                // IE11
                element.msRequestFullscreen();
            }
        }
        this.fullscreen = !this.fullscreen;
    }
  },
  mounted() {
    if (document.body.clientWidth < 1500) {
        this.collapseChage();
    }
  }
};
</script>
<style scoped>
.wq-topbar .el-menu-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #B3C0D1;
}
.collapse-btn {
    float: left;
    padding: 0 21px;
    cursor: pointer;
    line-height: 60px;
    outline-style: none;
}
.top-menu-item>.el-menu-item:hover,.top-menu-item>.el-menu-item{
  background-color: #B3C0D1;
}
.el-dropdown{
  margin-right: 20px;
}
.wq-topbar .el-menu-top h3 {
  line-height: 60px;
  padding: 6px;
  padding-left: 40px;
  font-size: 25px;
  text-shadow: 3px 2px 3px #999;
  outline: none;
}
.wq-topbar .el-menu-top .top-menu-item {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  line-height: 60px;
  outline: none;
}
.el-avatar{
  vertical-align: middle;
}
.quanping{
  transform: rotate(-45deg);
}
.el-dropdown-link img{
  display: inline-block;
  width: 50px;
  height: 50px;
  vertical-align: middle;
  border-radius: 50%;
}
.a{
  text-decoration: none;
  color: #000;
}
</style>